<template>
  <div class="articlelist-container">
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <van-list v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
        <van-cell v-for="item in ArticlesList"
                  :key="item.art_id.toString()"
                  @click="toDetail(item.art_id.toString())">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{item.title}}</span>
          </template>
          <template #label>
            <van-grid :border="false"
                      :column-num="item.cover.type">
              <van-grid-item v-for="(img,index) in item.cover.images"
                             :key="index">
                <van-image lazy-load
                           :src="img" />
              </van-grid-item>
            </van-grid>
            <!-- 文字说明 -->
            <div class="meta">
              <span>{{item.aut_name}}</span>
              <span>{{item.collect_count}} 条评论</span>
              <span>{{relativeTime(item.pubdate)}}</span>
              <!-- 添加叉号 另外添加stop阻止冒泡-->
              <!--
               注意这里：
               因为小叉号点击行为的发生会发生冒泡,而作为它的父元素同样需要绑定点击行为,为避免冲突,阻止冒泡
               -->
              <div class="close"
                   @click.stop="hShowAction(item.art_id)">
                <van-icon name="cross" />
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 弹出蒙层 -->
    <van-popup v-model="showMoreAction"
               :style="{ width: '80%' }"
               get-container="body">
      <!--这里放置更多操作组件 -->
      <MoreAction @dislike="hDislike"
                  @resport="hResport" />
    </van-popup>
  </div>

</template>

<script>
import { getArticles, dislikeArticle, reportArticle } from '@/api/article'

// 引入MoreAction组件
import MoreAction from './MoreAction'
export default {
  components: {
    MoreAction
  },
  name: 'ArticleList',
  props: {
    item: {
      type: Object
    }
  },
  data () {
    return {
      ArticlesList: [], // 用来存储文章内容
      loading: false, // 是否处于加载状态
      finished: false, // 是否还能获取到文章内容
      isLoading: false, // 是否处于加载状态
      showMoreAction: false, // 是否显示弹窗
      curArticleId: null // 接收点击传过来的id

    }
  },
  methods: {
    hGetArticles () {
      const time = new Date().getTime()
      getArticles(this.item.id, time).then(res => {
        const arr = res.data.data.results
        // 判断，当接口返回的条数=0时，提示信息，没有更多数据了
        if (arr.length === '') {
          this.finished = true
        }
        this.ArticlesList = [...this.ArticlesList, ...arr]
        this.loading = false
      })
    },
    // 下拉加载
    onRefresh () {
      const time = new Date().getTime()
      getArticles(this.item.id, time).then(res => {
        const newList = res.data.data.results
        this.ArticlesList = [...newList, ...this.ArticlesList]
        // 加载完成的条数提示
        console.log(this.ArticlesList)

        this.$toast({
          message: '已加载' + newList.length + '条',
          position: 'top'
        })

        this.isLoading = false
      })
    },
    // 上拉加载
    onLoad () {
      this.hGetArticles()
    },

    // 点击弹出事件绑定
    hShowAction (id) {
      this.showMoreAction = true
      // 定义一个属性用来接收获取到的id
      this.curArticleId = id.toString()
    },
    // 删除不感兴趣
    hDislike () {
      dislikeArticle(this.curArticleId).then((res) => {
        // 删除完或关闭弹窗
        this.showMoreAction = false
        // 将删除的数据从数组里去除掉
        this.ArticlesList.forEach((item, index) => {
          if (item.art_id.toString() === this.curArticleId) {
            this.ArticlesList.splice(index, 1)
          }
        })
      })
    },
    // 删除垃圾内容
    hResport (type) {
      reportArticle(this.curArticleId, type).then(res => {
        // 关闭弹窗
        this.showMoreAction = false
        // 删除数据
        this.ArticlesList.forEach((item, index) => {
          this.ArticlesList.splice(index, 1)
        })
      })
    },
    // 跳转文章详情页
    // eslint-disable-next-line camelcase
    toDetail (art_id) {
      this.$router.push({
        path: '/detail',
        query: {
          artID: art_id
        }
      })
    }

  }

}
</script>

<style scoped lang='less'>
.meta {
  span {
    margin-right: 10px;
  }
}
.close {
  display: inline-block;
  float: right;
}
</style>
